<template>
  <div>
    <ZgDialog :title="'查看'" v-model="visible" :showFooter="false" width="60%" top="5%">
      <h3>机构名称</h3>
      <ZgNewPage
        ref="page"
        :showInlineBtn="false"
        :uniqueName="uniqueName"
        :pageOpt="pageOpt"
        :headers="headers"
        :adminWidth="100"
        :isShowPagination="false"
        @search="onSearch"
        @filter="onFilter"
        @header="mergeHeader"
      >
        <template slot="columns">
          <a-table-column
            v-for="(h, i) in headers"
            :key="`column${i}`"
            :width="h.width === 0 ? 'auto' : h.width"
            align="center"
            :title="h.label"
          >
            <template slot-scope="record">
              {{ record[h.code] }}
            </template>
          </a-table-column>
        </template>
      </ZgNewPage>
      <ul class="list">
        <li>分组总分：<span>100</span></li>
        <li>综合加分：<span>100</span></li>
        <li>综合减分：<span>100</span></li>
        <li>合计：<span>100</span></li>
      </ul>
    </ZgDialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      obj: null,
      uniqueName: 'test',
      pageOpt: {
        showPageTitle: false,
        showConditionBtn: true,
        showHeaderConfig: false,
        showAttachBtn: false
      },
      headers: [
        { code: '1', label: '分组', isShow: true, sort: 0, width: 240 },
        { code: '2', label: '场景', isShow: true, sort: 0 },
        { code: '3', label: '本次分数', isShow: true, sort: 0 },
        { code: '4', label: '修改分数', isShow: true, sort: 0 }
      ]
    }
  },
  methods: {
    open (json) {
      this.obj = Object.assign({}, this.obj, json || {})
      this.visible = true
    },
    search () {
      const pageRef = this.$refs.page
      if (pageRef) {
        pageRef.search()
      } else {
        setTimeout(() => {
          this.search()
        }, 50)
      }
    },
    onSearch (param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      // 加载表头
      const list = [{ key: '1', id: '1', 1: '综合加分', 2: '场景名称', 3: '30.0', 4: '30.0' }]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    onFilter (f, param) {},
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders
        .filter((t) => {
          return t.isShow
        })
        .sort((a, b) => {
          return a.sort - b.sort
        })
    },
    onAdd () {
      const arr = this.fileList.filter((t) => {
        return t.path && t.path.length > 0
      })
      if (arr.length === 0) {
        this.$error({ title: '请上传文件' })
        return
      }
      this.$emit('ok')
      // const param = arr.map(t => {
      //     return {
      //     code: this.currAttType,
      //     fileName: t.name,
      //     fileSize: t.size,
      //     filePath: t.path,
      //     tableName: this.tableName,
      //     tableId: this.dataId
      //     }
      // })
      // this.$http.post('/zg-system/attach/add', param, () => {
      //     this.showAdd = false
      //     this.$refs.page.search()
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
h3 {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
.list {
  margin: 0 12px;
  display: flex;
  line-height: 50px;
  background: #7ab9ef30;
  li {
    flex: 1;
    text-indent: 10px;
  }
}
</style>
